<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }

        a.active {
            border-color: #e1251b;
            color: #e1251b;
        }

        .border {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 60px;
            line-height: 60px;
        }

        .header h2 {
            height: 100%;
            font-size: 24px;
            margin-left: 24px;

        }

        ul {
            display: flex;
            justify-content: flex-end;
            list-style: none;
        }

        ul li {
            margin: 0 20px;
            font-size: 14px;

        }

        .footer {
            padding: 0 16px;
        }
    </style>
</head>

<body>
    <div class="border">
        <div class="header">
            <h2>每日特价</h3>
                <ul>
                    <li><a href="javascript:;" class="active">精选</a></li>
                    <li><a href="javascript:;">美食</a></li>
                    <li><a href="javascript:;">百货</a></li>
                    <li><a href="javascript:;">个护</a></li>
                    <li><a href="javascript:;">预告</a></li>
                </ul>
        </div>
        <div class="footer">
            <div class="item"><img src="./imgs/tab00.png" alt="" class="details"></div>
        </div>
    </div>
    <script>
        const details = document.querySelector('.details')
        const aList = document.querySelectorAll('.header a')
        aList.forEach(element => {
            element.addEventListener('mouseenter', function(e){
                document.querySelector('a.active').classList.remove('active')
                this.classList.add('active')

                const nodesArray = Array.prototype.slice.call(aList) 
                const index = nodesArray.indexOf(element)
                details.src = `./imgs/tab0${index}.png`
            })
            
        });

    </script>

</body>

</html>